<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/layui/css/layui.css" media="all" />
<style>
.layui-anim-upbit {
	width: 280px !important;
	left: 67px !important;
}

.df {
	height: 100%;
	display: inline-block;
	/* margin-top: 8px; */
}

.width-a {
	display: inline;
	width: 160px;
	height: 32px;
}

.width-b {
	width: 410px;
}

.layui-form-select {
	display: inline-block;
	width: 160px;
	position: relative;
	right: 4px;
}

.layui-form-checkbox {
	position: relative;
	top: 5px !important;
}

.width-c {
	display: inline-block;
	width: 345px;
	height: 38px;
	position: relative;
	top: 1px;
}

.width-d {
	display: inline-block;
	width: 415px;
	height: 38px
}

.layui-form-autocomplete {
	display: inline-block;
}

.layui-form-autocomplete-focus {
	position: relative;
	right: 346px;
	top: 18px;
}

.layui-anim {
	width: 347px;
}

.layui-form-label {
	line-height: 14px;
	height: 26px;
	width: 60px;
}

.layui-input {
	width: 130px;
	height: 38px;
}

.layui-form-select {
	width: 130px;
	margin-left: 2px;
}

.layui-inline {
	padding-top: 4px;
	line-height: 14px;
}
</style>
</head>
<body style="background-color: white; overflow-y: scroll;">
	<div style="width: 100%; height: 100%;">
			<input type="hidden" id="edit">
			<form class="layui-form" action="" id="f1" layFilter="receiveForm">
				<div class="layui-inline">
					<label class="layui-form-label">操作日期</label>
					<div class="layui-inline">
						<input type="text" name="create_time" id="create_time"
							placeholder="选择日期" class="layui-input width-a" lay-key="1">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">寄件客户</label>
					<div class="layui-inline">
						<input type="text" name="sender_client" placeholder=""
							class="layui-input width-a">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 快件类型</label>
					<div class="layui-inline">
						<select name="express_type_id" lay-verify=""
							id="express_type_id">
							<option value="">请选择</option>

						</select>
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title">
								<input type="text" placeholder="请选择" value="" readonly=""
									class="layui-input layui-unselect"><i
									class="layui-edge"></i>
							</div>
							<dl class="layui-anim layui-anim-upbit">
								<dd lay-value="" class="layui-select-tips">请选择</dd>
							</dl>
						</div>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">物品类型</label>
					<div class="layui-inline">
						<select name="item_type_id" lay-verify="" id="item_type_id">
							<option value="">请选择</option>

						</select>
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title">
								<input type="text" placeholder="请选择" value="" readonly=""
									class="layui-input layui-unselect"><i
									class="layui-edge"></i>
							</div>
							<dl class="layui-anim layui-anim-upbit">
								<dd lay-value="" class="layui-select-tips">请选择</dd>
							</dl>
						</div>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 运输方式</label>
					<div class="layui-inline">
						<select name="transport_method_id" lay-verify="">
							<option value="">请选择</option>

						</select>
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title">
								<input type="text" placeholder="请选择" value="" readonly=""
									class="layui-input layui-unselect"> <i
									class="layui-edge"></i>
							</div>
							<dl class="layui-anim layui-anim-upbit">
								<dd lay-value="" class="layui-select-tips">请选择</dd>
							</dl>
						</div>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">付款方式</label>
					<div class="layui-inline">
						<select name="settment_method" lay-verify="">
							
						</select>
						
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">寄件网点</label>
					<div class="layui-inline">
						<input type="text" id="send_network_id" name="send_network_id"
							placeholder="" disabled="" class="layui-input width-a">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">重量</label>
					<div class="layui-inline">
						<input type="text" id="weigth" name="weight" placeholder=""
							class="layui-input width-a">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 取件员 </label>
					<div class="layui-inline">
						<input  type="text" style="width: 280px;"
							 name="take_name" placeholder=""
							class="layui-input   width-c">
						<button type="button" onclick="toTpuser()"
							class="layui-btn layui-btn-primary">选择</button>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label"> 目的地 </label>
					<div class="layui-inline">
						<input type="text" id="destination_network_name" name="destination_network_name" style="width: 280px;"
							placeholder="" autocomplete="off" class="layui-input   width-c">
						<div class="layui-form-autocomplete">
							<dl class="layui-anim layui-anim-upbit"></dl>
						</div>
						<button type="button" onclick="todestination()"
							class="layui-btn layui-btn-primary">选择</button>
					</div>
				</div>
				<br>
				<div class="layui-inline">
					<label class="layui-form-label"> <span style="color: red;">
							运单编号 </span>
					</label>
					<div class="layui-inline">
						<input type="text" id="waybill_number" style="width: 280px;"
							name="waybill_number" placeholder="" autocomplete="off"
							lay-verify="required" class="layui-input width-d">
					</div>
				</div>
				<br>
				<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" id="submit" lay-submit
					lay-filter="receiveForm">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<input type = "hidden" name="taker_id"  >
		<input type = "hidden" name = "destination_network_id" >
		<input type = "hidden" name = "scan_code" value="1" >
		<input type = "hidden" name = "scan_type" >
			</form>
		</div>
</body>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
	//Demo
	layui.use([ 'form','table', 'layer', 'laydate', 'jquery' ], function() {
		form = layui.form;
		var laydate = layui.laydate
		$ = layui.jquery;

		 var value = $("#edit").val();
			var edit = null;
			if (value.length != 0) {
			 edit = JSON.parse($("#edit").val());
			 edit.scan_type += $("[name=scan_code]").val()+","; //将状态码放入状态码集合中
				form.val('receiveForm',edit)			
			}
		
		laydate.render({
			elem : '#create_time',
			trigger : 'click',
			value : new Date()
			
		})

		
	
		
		//物品类型下拉框的拼接
		$.get("api/productType?op=list", function(d) {
			if (d.code == 0) {
				for ( var idx in d.data) {
					$("[name = 'item_type_id']").append(
							"<option value='"+d.data[idx].item_id+"'>"
									+ d.data[idx].item_name + "</option>");

					$("[name = 'item_type_id']").next().children("dl").append(
							"<dd lay-value='"+d.data[idx].item_id+"' class>"
									+ d.data[idx].item_name + "</dd>")
				}

				form.render('select'); //渲染下拉组件
				if (edit != null) {
		 			form.val("receiveForm",{
		 				"item_type_id": edit.item_type_id
					}); 
		 			}
			} else {
				layer.msg(d.msg, {
					icon : 2
				});
			}

		})
		
		
		//运输方式下拉框的拼接
		$.get("api/tranportMethod?op=list", function(d) {
			if (d.code == 0) {
				for ( var idx in d.data) {
					$("[name = 'transport_method_id']").append(
							"<option value='"+d.data[idx].transport_method_id+"'>"
									+ d.data[idx].transport_method + "</option>");

					$("[name = 'transport_method_id']").next().children("dl").append(
							"<dd lay-value='"+d.data[idx].transport_method_id+"' class>"
									+ d.data[idx].transport_method + "</dd>")
				}

				form.render('select'); //渲染下拉组件
				if (edit != null) {
		 			form.val("receiveForm",{
		 				"transport_method_id": edit.transport_method_id
					}); 
		 			}
			} else {
				layer.msg(d.msg, {
					icon : 2
				});
			}

		})
		
		//快件类型下拉框的拼接
		$.get("api/shipmenttype?op=list", function(d) {
			if (d.code == 0) {
				for ( var idx in d.data) {
					$("[name = 'express_type_id']").append(
							"<option value='"+d.data[idx].id+"'>"
									+ d.data[idx].shipment_type_name + "</option>");

					$("[name = 'express_type_id']").next().children("dl").append(
							"<dd lay-value='"+d.data[idx].id+"' class>"
									+ d.data[idx].shipment_type_name + "</dd>")
				}

				form.render('select'); //渲染下拉组件
				if (edit != null) {
		 			form.val("receiveForm",{
		 				"express_type_id": edit.express_type_id

					}); 
		 			}
				
			} else {
				layer.msg(d.msg, {
					icon : 2
				});
			}

		})

		//付款方式下拉框的拼接
		$.get("api/paymentMethod?op=list",
				function(d) {
					if (d.code == 0) {
						for ( var idx in d.data) {
							$("[name = 'settment_method']").append(
									"<option value='"+d.data[idx].id+"'>"
											+ d.data[idx].typeName + "=>"
											+ d.data[idx].paymentType
											+ "</option>");

							$("[name = 'settment_method']").next().children(
									"dl")
									.append(
											"<dd lay-value='"+d.data[idx].id+"' class>"
													+ d.data[idx].typeName
													+ "=>"
													+ d.data[idx].paymentType
													+ "</dd>")
						}

						form.render('select'); //渲染下拉组件
						if (edit != null) {
				 			form.val("receiveForm",{
				 				"settment_method": edit.settment_method
							}); 
				 			}
						

					} else {
						layer.msg(d.msg, {
							icon : 2
						});
					}

				})

		//监听提交
		form.on('submit(add)', function(data) {
			var params = JSON.stringify(data.field);
			
			$.post('',params,function(d) {
				
				if (d.code == 200) {
					layer.msg(d.msg,{"icon":2});
				}
			})
			alert(params);
			//renderdata(params)
			/* 
		  	 tableIns.reload({
		 		  
		 		    where : data.field
		 		  
		 		});   */
			return false;
		});

	});
	
	function todestination() {
    	var ins = parent.layer.getFrameIndex(window.name);
		console.log("第一个弹出层的index: "+ins)
		    	var index = parent.layer.open({//当前页面的index
					title : '选择目的地',
					type : 2,
					area : [ '750px', '460px' ], //宽高
					content : 'page?op=dest',
					success : function(layero, index){
				            var body = parent.layer.getChildFrame('body', index);
				            	//body.find("#edit").val(JSON.stringify(data));
				            body.find("#idx").val(ins);
				            setTimeout(function(){
				                layui.layer.tips('点击此处返回收件扫描列表', '.layui-layer-setwin .layui-layer-close', {
				                    tips: 3
				                });
				            },500)
				        }
				});
		    	var ins = parent.layer.getFrameIndex(window.name);
		    	console.log("editWaybill的当前页: "+ins);
		    }
	function toTpuser() {
		
		    	var index = layui.layer.open({
					title : '选择员工',
					type : 2,
					area : [ '750px', '460px' ], //宽高
					content : 'page?op=taker',
					success : function(layero, index){
				            var body = layui.layer.getChildFrame('body', index);
				         
				            
				            setTimeout(function(){
				                layui.layer.tips('点击此处返回收件扫描列表', '.layui-layer-setwin .layui-layer-close', {
				                    tips: 3
				                });
				            },500)
				        }
				});
			
		    	
		    }
	
	


</script>


</html>